<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!--
        案例要求：评论框
        数据结构[{},{},{}]
        每一个数据都是一个对象，对象当中的数据  评论内容，评论时间

        点击按钮  评论  就会往数组中加一个对象，push 或者 unshift
    -->
    <div class="box">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <h3>{{item.content}}</h3>
                <div>{{item.date}}</div>
            </li>
        </ul>
        <div>
            <input type="text" v-model="msg">
            <button v-on:click="submit">点击发送</button>
        </div>
        <div>
            <h3>查询</h3>
            <input type="text" v-model="searchInfo">
            <button @click="search">查询</button>
        </div>
        <div>
            <h3>改</h3>
            <input type="text" v-model="listindex">
            <button @click="update">查询</button>
        </div>
        <div>
            <h3>删除</h3>
            <input type="text" v-model="listindex">
            <button v-on:click="del">点击删除</button>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                searchInfo:'你好',
                msg:'',
                listindex:0,
                list:[
                    {
                        content:'你好啊，Vue！',
                        date:Date.now()
                    },
                    {
                        content:'好好学习，天天向上！',
                        date:Date.now()
                    }
                ]
            },
            methods:{
                submit(){
                    //创建对象
                    let obj = {};
                    obj.content =  this.msg;//将input中输入的值添加到对象中
                    obj.date = Date.now();
                    //将创建好的都对象添加到数组中
                    this.list.push(obj);
                    //清空输入框
                    this.msg = '';
                },
                //查询
                search(){
                    //思路是将数组中content包含你好的数据筛选出来
                    let result = this.list.filter((item,index)=>{
                        return item.content.includes(this.searchInfo)
                    });
                    console.log(result);
                },
                //更改
                update(){
                    let obj = {};
                    obj.content = '世界';
                    obj.date = Date.now();
                    this.list.splice(this.listindex,1,obj)
                },
                //删除
                del(){
                    this.list.splice(this.listindex,1)
                }
            }
        })
    </script>
</body>
</html>